<template>
	<view class="lot_info_box">
		<Tips/>
		<view class="lot_info_header">
			<view class="lot_title item text_ellipsis">
				{{lotInfo.title}}
			</view>
			<view class="join_nums item text_ellipsis">
				{{`${lotInfo.joinList?.length}/${lotInfo.part_in_nums}已参与，${changeJoinNums(JoinLotState.WINNER)}/${lotInfo.checked_nums}被抽中`}}
			</view>
			<view class="handle item" v-if="!lotInfo.isJoined">
				<MyButton height="80rpx" :bgc="primary_hot_color" :clickFun="joinLotFun">参与抓阄</MyButton>
			</view>
		</view>
		<AdBanner width="100%"/>
		<view class="lot_info_content">
			<view class="join_card" v-for="item in lotInfo.joinList" :key="item.user_id">
				<view class="join_avatar">
					<Avatar
						:fileName="item.user_avatar" 
						size="60rpx"/>
				</view>
				<view class="join_center">
					<view class="top text_ellipsis">
						{{item.nick_name_by_dormitory}}
					</view>
					<view class="bottom text_ellipsis">
						{{deleteLot(item.createAt)}}
					</view>
				</view>
				<view class="join_info_state">
					{{changeJoinState(item.state)}}
				</view>
			</view>
		</view>
		<MyModal :openModalFlag="modalOpenJoinResultFlag" :cancelFun="okResultFun" :okFun="okResultFun">
			<template #title>
				{{joinResult.name}}
			</template>
			<template #content>
				<MyNull :img="joinResult.imgUrl"/>
			</template>
		</MyModal>
		<MyPopub itemPadding="0rpx" height="100rpx" :isOpenPopub="openLotPopubFlag" :slotsNums="1">
			<template #1>
				<button class="invite_joiner" @click="closePupubShare" open-type="share">分享该抓阄活动</button>
			</template>
		</MyPopub>
	</view>
</template>

<script setup>
	import {nextTick, onMounted, onUnmounted, ref} from 'vue'
	import {
		onLoad,onShow,onHide,onShareAppMessage
	} from '@dcloudio/uni-app'
	
	import MyButton from '@/components/MyButton/MyButton.vue'
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		deleteLot
	} from '@/utils/changeData.js'
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	import {
		openMessageAuth
	} from '@/utils/messageAuth.js'
	import {
		JoinLotState
	} from '@/enum/GlobalEnum.js'
	import {
		verifyIsLogin,
		verifyIsShowChooseAd
	} from '@/hooks/verify.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		primary_hot_color,
		primary_light_color,
		primary_main_bgc,
		shallow_text_color,
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const lot_id=ref()
	const lotInfo=ref({
		part_in_nums:0,
		checked_nums:0
	})
	const formData=ref({
		limit:1000,
		page:0,
		orderBy:'createAt.desc',
		state:0
	})
	
	const changeJoinState=(state)=>{
		return state===JoinLotState.WINNER ? '已抽中' : '未抽中'
	}
	//查询参与数量
	const changeJoinNums=(state)=>{
		lotInfo.value.joinList=lotInfo.value.joinList||[]
		const arr=lotInfo.value.joinList.filter(item=>item.state===state)
		return arr.length
	}
	
	//参与抓阄 
	const modalOpenJoinResultFlag=ref(0)
	const joinResult=ref({
		name:'',
		imgUrl:''
	})
	const joinLotFun=async()=>{
		verifyIsLogin()
		verifyIsShowChooseAd(getCurrentPages(),'参与抓阄')
		const {data,success}= await dormitoryModel.postJoinLot({},lot_id.value)
		if(success){
			modalOpenJoinResultFlag.value=Math.random()
			if(data===JoinLotState.WINNER){
				joinResult.value.name="恭喜您抽中了"
				joinResult.value.imgUrl="winerLot.png"
			}else{
				joinResult.value.name="很遗憾，您没有抽中"
				joinResult.value.imgUrl="loseLot.png"
			}
			getLotInfo()
		}
	}
	const okResultFun=()=>{
		modalOpenJoinResultFlag.value=-Math.random()
		openMessageAuth()
	}
	
	const timer=ref()
	const getLotInfo=async(id)=>{
		verifyIsLogin()
		const {data,success} = await dormitoryModel.getLotJoinInfo(formData.value,lot_id.value)
		if(success){
			lotInfo.value = data[0]
			
			if(changeJoinNums(JoinLotState.WINNER)===lotInfo.value.checked_nums){
				clearInterval(timer.value)
			}
		}
	}
	
	//发起活动分享
	const openLotPopubFlag=ref(0)
	onShareAppMessage((res)=>{
		return {
			  title: '来抓个阄：'+lotInfo.value.title,
			  path: `/pages/Dormitory/LotInfo/LotInfo?lot_id=${lot_id.value}`,
			  mpPath:`/pages/Dormitory/LotInfo/LotInfo?lot_id=${lot_id.value}`,
			  imageUrl:joinSystemPath('nullEstate.png')
			}
	})
	const closePupubShare=()=>{
		openLotPopubFlag.value=-Math.random()
	}
	
	onLoad((opt)=>{
		const {lot_id:_lot_id,isNew} = opt
		if(_lot_id){
			lot_id.value = _lot_id
		}
		nextTick(()=>{
			uni.$emit('autoShowPushScreenAd')
		})
		if(isNew){
			nextTick(()=>{
				uni.$emit('tips','记得分享给室友哦','info',2000)
				// openLotPopubFlag.value=Math.random()
			})
		}
	})

	onUnmounted(()=>{
		clearInterval(timer.value)
	})
	
	onHide(()=>{
		clearInterval(timer.value)
	})
	
	onShow(()=>{
		getLotInfo(lot_id.value)
		timer.value=setInterval(()=>{
			getLotInfo(lot_id.value)
		},1000)
	})
</script>

<style lang="less">
	.text_ellipsis{
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow: hidden;
	}
	.lot_info_box{
		background-color: v-bind(primary_main_bgc);
		height: calc(100vh);
		padding: 20rpx;
		.lot_info_header{
			background-color: v-bind(primary_light_color);
			border-radius: 12rpx;
			padding: 20rpx;
			.item{
				text-align: center;
				width: 100%;
				margin: 10rpx 0;
			}
			.lot_title{
				color: v-bind(primary_text_color);
			}
			.join_nums{
				color: #FFFFFF;
			}
		}
		.lot_info_content{
			.join_card{
				margin-top: 20rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx;
				padding: 10rpx 0;
				padding-left: 20rpx;
				display: flex;
				.join_avatar{
					width: 10%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;
				}
				.join_center{
					width: 70%;
					color: v-bind(primary_text_color);
					.bottom{
						color: v-bind(shallow_text_color);
						font-size: 25rpx;
					}
				}
				.join_info_state{
					width: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: v-bind(primary_hot_color);
				}
			}
		}
		.invite_joiner{
			margin: 0 !important;
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF !important;
			color: v-bind(primary_text_color);
			border: 0px solid #FFFFFF !important;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
